// 引入需要使用的样式
require("../css/run.less")
require("../fonts/iconfont.css")
document.ready(function () {
    // 判断是否登录
    window.utils.isLogin();
    //接收挂载在window上的底部tab栏
    window.utils.navTabs("sport");
    // 顶部导航
    window.utils.addTopNav('run');
    // 取出本地存储的数据（用户的id）
    const userId = window.localStorage.getItem("userId");
    // 获取dom元素节点
    const runNum = document.querySelector("#runNum") //跑步数据
    const runDistanceNum = document.querySelector("#runDistanceNum") //运动数据
    const paceNum = document.querySelector("#paceNum") //配速
    const calorieNum = document.querySelector("#calorieNum") //千卡
    const iconBtn = document.querySelector("#iconBtn"); //地图图标按钮
    const goBtn = document.querySelector("#goBtn") //倒计时按钮
    const maskCountdown = document.querySelector("#maskCountdown") //倒计时蒙层
    const numCountdown = document.querySelector("#numCountdown") //倒计时文字
    const iconStop = document.querySelector("#iconStop") //暂停
    const iconContinue = document.querySelector("#iconContinue") //继续
    const iconOver = document.querySelector("#iconOver") //结束
    const sportPanel = document.querySelector("#sportPanel") //运动数据蒙层
    const mapState = document.querySelector("#mapState") //数据面板地图蒙层
    const runTimes = document.querySelector("#runTime") //跑步时间
    const btns = document.querySelector('#btns') //  继续 & 结束 容器// 渲染运动数据信息
    const mapCard = document.querySelector("#mapCard") //地图模块-卡片
    const cardDistance = document.querySelector("#cardDistance") //公里
    const sportDate = document.querySelector("#sportDate") //日期
    const cardPace = document.querySelector("#cardPace") //平均配速
    const cardTime = document.querySelector("#cardTime") //用时
    const cardCalorie = document.querySelector("#cardCalorie") //千卡
    const backBtn = document.querySelector("#backBtn") //返回按钮
    const completeBtn = document.querySelector("#completeBtn") //完成按钮

    function runData() {
        window.$http.get(`sports/exerciseData?id=${userId}`, function (res) {
            if (res.status === 0) {
                let runkm = res.data.runkm;
                runNum.textContent = runkm.toFixed(2);
            }
        })
    }
    runData()
    /* 跑步封面地图 */
    function initRunMap() {
        // 创建地图实例  
        const map = new BMap.Map("mapContent");

        const geolocation = new BMap.Geolocation() // 得到一个位置对象
        // 调用方法获取当前位置
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) { // 定位成功

                // 获取经纬度
                let lng = r.longitude // 经度
                let lat = r.latitude // 纬度

                // 创建点坐标  
                const point = new BMap.Point(lng, lat); // 经度和纬度
                // 初始化地图，设置中心点坐标和地图级别 
                map.centerAndZoom(point, 18);

            } else { // 定位失败
                window.utils.showToast('err', '定位失败，重新定位', 2000)
            }
        })
    }
    // 倒计时蒙层
    goBtn.addEventListener("click", function () {
        maskCountdown.style.display = " block"
        let numArr = [3, 2, 1, 'Go']; //倒计时数组
        let i = 0; //索引
        numCountdown.textContent = numArr[i]; //初次渲染倒计时
        //    倒计时
        let intervalId = setInterval(function () {
            i++;
            numCountdown.textContent = numArr[i]; //渲染倒计时
            if (i > 3) {
                clearInterval(intervalId); //清除定时器
                maskCountdown.style.display = "none"; //隐藏倒计时蒙层
                sportPanel.style.display = 'block'; //显示运动数据蒙层
                starRun() //倒计时结束，跑步计时
            }
        }, 1000)
    })
    // 声明变量
    let runTime = 0; //跑步时间
    let runIntervalId = null; //跑步定时器id
    let interval = 0.00001; // 模拟运动变化
    let pointArr = []; // 保存实时获取到的经纬度的坐标
    let count = 0; // 定位的次数
    let runDistance = 0; // 跑步距离
    let pace; // 配速
    let calorie; // 卡路里

    // 初始化地图
    const map = new BMap.Map("mapState");

    /* 获取位置函数 */
    function getLocation() {
        const geolocation = new BMap.Geolocation() // 获取一个位置对象
        // 调用方法 获取当前位置
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                // 获取当前位置经纬度  [模拟运动 真实情况 不要]
                let lng = parseFloat(r.longitude) + interval
                let lat = parseFloat(r.latitude) + interval
                interval += 0.00001;

                // 把经纬度保存进入数组
                pointArr.push({
                    lng: lng,
                    lat: lat
                })

                const point = new BMap.Point(lng, lat) // new一个点对象
                map.centerAndZoom(point, 18) //  设置中心点坐标和地图级别

                if (count === 0) {
                    console.log('绘制运动的起点')
                    // 绘制起点
                    const point = new BMap.Point(pointArr[0].lng, pointArr[0].lat)
                    window.utils.addMarker(map, point, require('../img/start.png'))
                } else {
                    // 绘制线条
                    window.utils.drawLine(map, pointArr[count - 1], pointArr[count])
                }
                count++;
            } else {
                window.utils.showToast('err', '定位失败', 2000)
            }
        });
    }
    getLocation()
    // 开始跑步-计时
    function starRun() {
        runIntervalId = setInterval(function () {
            runTime += 1;
            let t = window.utils.formatTime(runTime) //格式化跑步时间
            runTimes.textContent = t //渲染时间
            cardTime.textContent = t //渲染跑步时间-地图蒙层
            // 渲染跑步距离
            // 渲染跑步距离
            if (pointArr.length) {
                runDistance = window.utils.calcDistance(pointArr[0], pointArr[pointArr.length - 1])
                runDistanceNum.textContent = runDistance // 渲染跑步距离
                cardDistance.textContent = runDistance // 选人跑步距离 - 地图模式
            }

            // 渲染配速
            pace = window.utils.calcPace(runDistance, runTime)
            paceNum.textContent = pace
            cardPace.textContent = pace

            // 渲染卡路里
            calorie = window.utils.calCalorie(runDistance)
            calorieNum.textContent = calorie;
            cardCalorie.textContent = calorie;

            getLocation() // 运动过程中 实时获取位置
        }, 1000)
    }
    // 暂停
    iconStop.addEventListener("click", function () {
        clearInterval(runIntervalId) //清除定时器
        iconStop.style.display = 'none' //隐藏暂停按钮
        btns.style.display = "block" //显示继续结束按钮
    })
    // 继续
    iconContinue.addEventListener("click", function () {
        starRun(); //继续计时
        iconStop.style.display = 'block' //隐藏暂停按钮
        btns.style.display = "none" //显示继续结束按钮
    })
    // 结束
    iconOver.addEventListener("click", function () {
        clearInterval(runIntervalId) //清除定时器
        // 显示地图蒙层
        mapState.style.display = "block"
        // 隐藏返回按钮
        backBtn.style.display = "none"
        // 显示完成按钮
        completeBtn.style.display = "block"
        // 显示地图卡片
        mapCard.style.display = "block"
        getLocation() // 获取一次位置

        // 绘制终点
        const point = new BMap.Point(pointArr[pointArr.length - 1].lng, pointArr[pointArr.length - 1].lat)
        window.utils.addMarker(map, point, require('../img/end.png'))
    })

    initRunMap()
    // 切换到地图蒙层 点击iconBtn图标
    iconBtn.addEventListener("click", function () {
        // 显示地图蒙层
        mapState.style.display = "block"
        // 显示返回按钮
        backBtn.style.display = "block"
        // 隐藏完成按钮
        completeBtn.style.display = "none"
        // 地图卡片
        mapCard.style.display = "block"
        getLocation() // 获取一次位置
    })
    // 返回按钮--假返回(关闭蒙层返回主页面)
    backBtn.addEventListener("click", function () {
        // 隐藏地图蒙层
        mapState.style.display = "none"
        // 隐藏返回按钮
        backBtn.style.display = "none"
        // 隐藏完成按钮
        completeBtn.style.display = "none"
        // 隐藏卡片
        mapCard.style.display = "none"
    })
    // 完成按钮
    completeBtn.addEventListener("click", function () {
        //发送ajax数据
        let params = {
            id: window.localStorage.getItem('userId'),
            type: 1,
            takeTime: runTime,
            miles: runDistance,
            averagerate: runDistance / runTime,
            calorie: calorie,
        }

        // 发送ajax 保存运动数据
        window.$http.post('sports/save', params, function (res) {
            if (res.status === 0) {
                window.utils.showTost('succ', '保存运动数据成功', 2000)

                setTimeout(function () {
                    window.location.href = './run.html'
                }, 2000)
            }
        })
    })
    // 运动日期
    sportDate.textContent = window.utils.getDate(new Date())
})